﻿@page "/components/tag"

<PageOutlet Url="components/tag"
            Title="Tag"
            Description="Tag component of the bit BlazorUI components" />

<DemoPage Name="Tag"
          SecondaryNames="@(["Chip"])"
          Description="Tag component provides a visual representation of an attribute, person, or asset."
          Parameters="componentParameters"
          SubEnums="componentSubEnums"
          SubClasses="componentSubClasses"
          GitHubUrl="Notifications/Tag/BitTag.razor"
          GitHubDemoUrl="Notifications/Tag/BitTagDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <BitTag Text="Basic tag" />
    </DemoExample>

    <DemoExample Title="Variant" RazorCode="@example2RazorCode" Id="example2">
        <div>The tag offers three variants: Fill (default), Outline, and Text.</div>
        <br />
        <BitTag Text="Fill" Variant="BitVariant.Fill" />&nbsp;
        <BitTag Text="Outline" Variant="BitVariant.Outline" />&nbsp;
        <BitTag Text="Text" Variant="BitVariant.Text" />
    </DemoExample>

    <DemoExample Title="Icon" RazorCode="@example3RazorCode" Id="example3">
        <div>Display an icon within a BitTag to represent its content visually.</div>
        <br />
        <BitTag Text="Calendar icon" IconName="@BitIconName.Calendar" />
    </DemoExample>

    <DemoExample Title="Dismiss" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
        <div>Use the OnDismiss feature in BitTag to provide a close button for the tag content.</div>
        <br />
        @if (isDismissed is false)
        {
            <BitTag IconName="@BitIconName.AlarmClock" Text="Dismiss me" OnDismiss="() => isDismissed = true" />
        }
        <br />
        <br />
        <BitButton IsEnabled="isDismissed" Variant="BitVariant.Outline" OnClick="() => isDismissed = false">
            Dismissed, click to reset
        </BitButton>
    </DemoExample>

    <DemoExample Title="Color" RazorCode="@example5RazorCode" Id="example5">
        <div>Offering a range of specialized color variants, providing visual cues for specific actions or states within your application.</div>
        <br />
        <BitTag Text="Primary" IconName="@BitIconName.Calendar" Color="BitColor.Primary" Variant="BitVariant.Fill" />&nbsp;
        <BitTag Text="Primary" IconName="@BitIconName.Calendar" Color="BitColor.Primary" Variant="BitVariant.Outline" />&nbsp;
        <BitTag Text="Primary" IconName="@BitIconName.Calendar" Color="BitColor.Primary" Variant="BitVariant.Text" />
        <br /><br />
        <BitTag Text="Secondary" IconName="@BitIconName.Calendar" Color="BitColor.Secondary" Variant="BitVariant.Fill" />&nbsp;
        <BitTag Text="Secondary" IconName="@BitIconName.Calendar" Color="BitColor.Secondary" Variant="BitVariant.Outline" />&nbsp;
        <BitTag Text="Secondary" IconName="@BitIconName.Calendar" Color="BitColor.Secondary" Variant="BitVariant.Text" />
        <br /><br />
        <BitTag Text="Tertiary" IconName="@BitIconName.Calendar" Color="BitColor.Tertiary" Variant="BitVariant.Fill" />&nbsp;
        <BitTag Text="Tertiary" IconName="@BitIconName.Calendar" Color="BitColor.Tertiary" Variant="BitVariant.Outline" />&nbsp;
        <BitTag Text="Tertiary" IconName="@BitIconName.Calendar" Color="BitColor.Tertiary" Variant="BitVariant.Text" />
        <br /><br />
        <BitTag Text="Info" IconName="@BitIconName.Calendar" Color="BitColor.Info" Variant="BitVariant.Fill" />&nbsp;
        <BitTag Text="Info" IconName="@BitIconName.Calendar" Color="BitColor.Info" Variant="BitVariant.Outline" />&nbsp;
        <BitTag Text="Info" IconName="@BitIconName.Calendar" Color="BitColor.Info" Variant="BitVariant.Text" />
        <br /><br />
        <BitTag Text="Success" IconName="@BitIconName.Calendar" Color="BitColor.Success" Variant="BitVariant.Fill" />&nbsp;
        <BitTag Text="Success" IconName="@BitIconName.Calendar" Color="BitColor.Success" Variant="BitVariant.Outline" />&nbsp;
        <BitTag Text="Success" IconName="@BitIconName.Calendar" Color="BitColor.Success" Variant="BitVariant.Text" />
        <br /><br />
        <BitTag Text="Warning" IconName="@BitIconName.Calendar" Color="BitColor.Warning" Variant="BitVariant.Fill" />&nbsp;
        <BitTag Text="Warning" IconName="@BitIconName.Calendar" Color="BitColor.Warning" Variant="BitVariant.Outline" />&nbsp;
        <BitTag Text="Warning" IconName="@BitIconName.Calendar" Color="BitColor.Warning" Variant="BitVariant.Text" />
        <br /><br />
        <BitTag Text="SevereWarning" IconName="@BitIconName.Calendar" Color="BitColor.SevereWarning" Variant="BitVariant.Fill" />&nbsp;
        <BitTag Text="SevereWarning" IconName="@BitIconName.Calendar" Color="BitColor.SevereWarning" Variant="BitVariant.Outline" />&nbsp;
        <BitTag Text="SevereWarning" IconName="@BitIconName.Calendar" Color="BitColor.SevereWarning" Variant="BitVariant.Text" />
        <br /><br />
        <BitTag Text="Error" IconName="@BitIconName.Calendar" Color="BitColor.Error" Variant="BitVariant.Fill" />&nbsp;
        <BitTag Text="Error" IconName="@BitIconName.Calendar" Color="BitColor.Error" Variant="BitVariant.Outline" />&nbsp;
        <BitTag Text="Error" IconName="@BitIconName.Calendar" Color="BitColor.Error" Variant="BitVariant.Text" />
        <br /><br />
        <div style="background:var(--bit-clr-fg-sec);padding:1rem">
            <BitTag Text="PrimaryBackground" IconName="@BitIconName.Calendar" Color="BitColor.PrimaryBackground" Variant="BitVariant.Fill" />&nbsp;
            <BitTag Text="PrimaryBackground" IconName="@BitIconName.Calendar" Color="BitColor.PrimaryBackground" Variant="BitVariant.Outline" />&nbsp;
            <BitTag Text="PrimaryBackground" IconName="@BitIconName.Calendar" Color="BitColor.PrimaryBackground" Variant="BitVariant.Text" />
            <br /><br />
            <BitTag Text="SecondaryBackground" IconName="@BitIconName.Calendar" Color="BitColor.SecondaryBackground" Variant="BitVariant.Fill" />&nbsp;
            <BitTag Text="SecondaryBackground" IconName="@BitIconName.Calendar" Color="BitColor.SecondaryBackground" Variant="BitVariant.Outline" />&nbsp;
            <BitTag Text="SecondaryBackground" IconName="@BitIconName.Calendar" Color="BitColor.SecondaryBackground" Variant="BitVariant.Text" />
            <br /><br />
            <BitTag Text="TertiaryBackground" IconName="@BitIconName.Calendar" Color="BitColor.TertiaryBackground" Variant="BitVariant.Fill" />&nbsp;
            <BitTag Text="TertiaryBackground" IconName="@BitIconName.Calendar" Color="BitColor.TertiaryBackground" Variant="BitVariant.Outline" />&nbsp;
            <BitTag Text="TertiaryBackground" IconName="@BitIconName.Calendar" Color="BitColor.TertiaryBackground" Variant="BitVariant.Text" />
        </div>
        <br /><br />
        <BitTag Text="PrimaryForeground" IconName="@BitIconName.Calendar" Color="BitColor.PrimaryForeground" Variant="BitVariant.Fill" />&nbsp;
        <BitTag Text="PrimaryForeground" IconName="@BitIconName.Calendar" Color="BitColor.PrimaryForeground" Variant="BitVariant.Outline" />&nbsp;
        <BitTag Text="PrimaryForeground" IconName="@BitIconName.Calendar" Color="BitColor.PrimaryForeground" Variant="BitVariant.Text" />
        <br /><br />
        <BitTag Text="SecondaryForeground" IconName="@BitIconName.Calendar" Color="BitColor.SecondaryForeground" Variant="BitVariant.Fill" />&nbsp;
        <BitTag Text="SecondaryForeground" IconName="@BitIconName.Calendar" Color="BitColor.SecondaryForeground" Variant="BitVariant.Outline" />&nbsp;
        <BitTag Text="SecondaryForeground" IconName="@BitIconName.Calendar" Color="BitColor.SecondaryForeground" Variant="BitVariant.Text" />
        <br /><br />
        <BitTag Text="TertiaryForeground" IconName="@BitIconName.Calendar" Color="BitColor.TertiaryForeground" Variant="BitVariant.Fill" />&nbsp;
        <BitTag Text="TertiaryForeground" IconName="@BitIconName.Calendar" Color="BitColor.TertiaryForeground" Variant="BitVariant.Outline" />&nbsp;
        <BitTag Text="TertiaryForeground" IconName="@BitIconName.Calendar" Color="BitColor.TertiaryForeground" Variant="BitVariant.Text" />
        <br /><br /><br />
        <BitTag Text="PrimaryBorder" IconName="@BitIconName.Calendar" Color="BitColor.PrimaryBorder" Variant="BitVariant.Fill" />&nbsp;
        <BitTag Text="PrimaryBorder" IconName="@BitIconName.Calendar" Color="BitColor.PrimaryBorder" Variant="BitVariant.Outline" />&nbsp;
        <BitTag Text="PrimaryBorder" IconName="@BitIconName.Calendar" Color="BitColor.PrimaryBorder" Variant="BitVariant.Text" />
        <br /><br />
        <BitTag Text="SecondaryBorder" IconName="@BitIconName.Calendar" Color="BitColor.SecondaryBorder" Variant="BitVariant.Fill" />&nbsp;
        <BitTag Text="SecondaryBorder" IconName="@BitIconName.Calendar" Color="BitColor.SecondaryBorder" Variant="BitVariant.Outline" />&nbsp;
        <BitTag Text="SecondaryBorder" IconName="@BitIconName.Calendar" Color="BitColor.SecondaryBorder" Variant="BitVariant.Text" />
        <br /><br />
        <BitTag Text="TertiaryBorder" IconName="@BitIconName.Calendar" Color="BitColor.TertiaryBorder" Variant="BitVariant.Fill" />&nbsp;
        <BitTag Text="TertiaryBorder" IconName="@BitIconName.Calendar" Color="BitColor.TertiaryBorder" Variant="BitVariant.Outline" />&nbsp;
        <BitTag Text="TertiaryBorder" IconName="@BitIconName.Calendar" Color="BitColor.TertiaryBorder" Variant="BitVariant.Text" />
    </DemoExample>

    <DemoExample Title="Size" RazorCode="@example6RazorCode" Id="example6">
        <div>Offering a range of specialized color variants, providing visual cues for specific actions or states within your application.</div>
        <br />
        <BitTag Text="Small" IconName="@BitIconName.Calendar" Size="BitSize.Small" Variant="BitVariant.Fill" />&nbsp;
        <BitTag Text="Small" IconName="@BitIconName.Calendar" Size="BitSize.Small" Variant="BitVariant.Outline" />&nbsp;
        <BitTag Text="Small" IconName="@BitIconName.Calendar" Size="BitSize.Small" Variant="BitVariant.Text" />
        <br /><br />
        <BitTag Text="Medium" IconName="@BitIconName.Calendar" Size="BitSize.Medium" Variant="BitVariant.Fill" />&nbsp;
        <BitTag Text="Medium" IconName="@BitIconName.Calendar" Size="BitSize.Medium" Variant="BitVariant.Outline" />&nbsp;
        <BitTag Text="Medium" IconName="@BitIconName.Calendar" Size="BitSize.Medium" Variant="BitVariant.Text" />
        <br /><br />
        <BitTag Text="Large" IconName="@BitIconName.Calendar" Size="BitSize.Large" Variant="BitVariant.Fill" />&nbsp;
        <BitTag Text="Large" IconName="@BitIconName.Calendar" Size="BitSize.Large" Variant="BitVariant.Outline" />&nbsp;
        <BitTag Text="Large" IconName="@BitIconName.Calendar" Size="BitSize.Large" Variant="BitVariant.Text" />
    </DemoExample>

    <DemoExample Title="Template" RazorCode="@example7RazorCode" Id="example7">
        <div>Customize the content inside BitTag using a template with different elements and components.</div>
        <br />
        <BitTag>
            <BitStack Horizontal Gap="0.5rem" Style="padding-inline: 0.5rem;">
                <BitLabel>Custom content</BitLabel>
                <BitRollerLoading CustomSize="32" Color="BitColor.Tertiary" />
            </BitStack>
        </BitTag>
    </DemoExample>

    <DemoExample Title="Style & Class" RazorCode="@example8RazorCode" Id="example8">
        <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
        <br /><br />
        <div>Component's Style & Class:</div>
        <br />
        <div>
            <BitTag Text="Styled Tag"
                    IconName="@BitIconName.People"
                    Style="border-radius: 1rem; font-weight:bold" />&nbsp;
            <BitTag Text="Classed Tag"
                    IconName="@BitIconName.People"
                    Class="custom-class" Variant="BitVariant.Outline" />
            <br /><br /><br />
            <div><b>Styles</b> & <b>Classes</b>:</div>
            <br />
            <BitTag Text="Styles"
                    IconName="@BitIconName.People"
                    Styles="@(new() { Root = "border-color: red; background-color: transparent;",
                                      Text = "color: tomato; font-weight: bold;",
                                      Icon = "color: tomato;" })" />
            &nbsp;
            <BitTag Text="Classes"
                    IconName="@BitIconName.People"
                    Classes="@(new() { Root = "custom-root",
                                       Icon = "custom-icon" })" />
        </div>
    </DemoExample>
</DemoPage>